require('../../assets/css/index.less')
require('./sport.less')
require('../../assets/js/property')
const renderTabbar = require('../../intils/tabbar.js')
const request = require('../../intils/reques')
// 定义api地址
const url = 'http://fitness.h5.itsource.cn:3701'




window.onload = () => {
    renderTabbar()
    // 地图
  function map1(){
    let map = new AMap.Map('container', {
        zoom:11,//级别
        center: [104.065861,30.657401],//中心点坐标
        viewMode:'3D'//使用3D视图
    });
    AMap.plugin([
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.HawkEye',
        'AMap.MapType',
        'AMap.Geolocation',
    ], function(){
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar());
    
        // // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        // map.addControl(new AMap.Scale());
    
        // // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
        // // map.addControl(new AMap.HawkEye({isOpen:true}));
       
        // // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        // map.addControl(new AMap.MapType());
       
        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
        map.addControl(new AMap.Geolocation());
    });

  }
  map1()

  function map2(){
    let map = new AMap.Map('container1', {
        zoom:11,//级别
        center: [104.065861,30.657401],//中心点坐标
        viewMode:'3D'//使用3D视图
    });
    AMap.plugin([
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.HawkEye',
        'AMap.MapType',
        'AMap.Geolocation',
    ], function(){
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar());
    
        // // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        // map.addControl(new AMap.Scale());
    
        // // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
        // // map.addControl(new AMap.HawkEye({isOpen:true}));
       
        // // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        // map.addControl(new AMap.MapType());
       
        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
        map.addControl(new AMap.Geolocation());
    });

  }
  $('.ridebtn').addEventListener('click',map2)

    // 选项卡
    $a('.title').forEach((v, i) => {
        v.addEventListener('click', () => {


            $a('.title').forEach((a, b) => {
                a.classList.remove('spanActive')
                $a('.tapbar')[b].style.display='none'


            })

            v.classList.add('spanActive')
            $a('.tapbar')[i].style.display='block'


        })
    })

    // 获取课程列表
    function getData() {
        request.get('/api/train/courseList')
            .then(res => {
                let { errno, data } = res.data
                console.log(res.data);
                if (errno === 0) {
                    xuanRan(data)
                }
            })
    }
    getData()
    // 渲染函数
    function xuanRan(data) {
        const data1 = data[0]
        // 最新课程代码
        let html1 = `
        <h2>最新课程</h2>
        <!-- 课程详情 -->
        <a class="latestBox" href="./course-details.html?id=${data1.courseId}">
            <img  alt="" id="img1" src="${url + data1.imgurl}">
            <!-- 课程介绍 -->
            <div class="latestBox-bottom">
                <h3 id="latestTitle">${data1.name}</h3>
                <span id="latestContent">${data1.desc}</span>
            </div>

        </a>
        
        
        `
        $('.latest').innerHTML = html1



        //获取课程列表数据
        const data2 = data.filter((v, i) => i !== 0)



        // 课程列表代码
        let html2 = `
               ${data2.map(v => `
             
                <a class="list-iteam shadow" href="./course-details.html?id=${v.courseId}">
                    <img  alt="" id="img2" src="${url + v.imgurl}">
                    <h3>${v.name}</h3>
                    <span>${v.desc}</span>
                </a>` ).join('')

            }
        
        
        `
        $('.courseList').innerHTML = `<h3>课程</h3>` + html2

    }






}